<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*
    BFC(Block Formatting Context)即"块级格式化上下文，IFC(Inline Formatting Context)即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在
被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元索将不与箱子内的元素产生作用。
BFC是W3 C CSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元索的关系和相互作用。当涉及到可视化布局的时候，B引ock
Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成
BFC,浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。
在普通流中的Box(框)属于一种formatting context(格式化上下文)，类型可以是block,或者是inline,但不能同时属于这两者。并目，Block boxes(块框)在
block formatting context(块格式化上下文)里格式化，Inline boxes(块内框)则在Inline Formatting Context(行内格式化上下文)里格式化，
1.2、如何产生BFC
当一个HTML元紊满足下面条件的任何一点，都可l以产生Block Formatting Context:
a,、floatf的值不为none
b)、overflowl的值不为visible
c、以display的值为table-cell,table-caption,inline-block中的任何一个
d)、position的值不为relative和static
*/
</script>
</html>